import { PureComponent } from 'react'
import { Recommands, LoadMore } from '../style'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
class Recommond extends PureComponent {
  //使用PureComponent
  // shouldComponentUpdate(){}
  render() {
    let { list } = this.props
    return (
      <Recommands>
        {list.map((item, index) => {
          return (
            <div key={index} className="recommond__item">
              <div className="item__left">
                <h3>{item.get('title')}</h3>
                <p>{item.get('content')}</p>
              </div>
              <div className="item__right">
                <img src={item.get('img')} alt="" />
              </div>
            </div>
          )
        })}
        <LoadMore
          onClick={() => {
            this.props.loadMore(this.props.pageIndex)
          }}
        >
          阅读更多
        </LoadMore>
      </Recommands>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    list: state.getIn(['home', 'recommondList']),
    pageIndex: state.getIn(['home', 'pageIndex']),
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    loadMore(pageIndex) {
      // console.log(actionCreators.loadMore())
      dispatch(actionCreators.loadMore(pageIndex))
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Recommond)
